<template>
  <el-dialog
    title="选择字段"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="600px"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="50vh"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="字段名称" prop="label" min-width="150">
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="saveloading" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { getTaskTemplateTitles } from "@/api/taskMgmt/kanbanConfig";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    taskTemplateCode: {
      type: [String, null],
      default: null,
    },
  },
  data() {
    return {
      list: [],
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      saveloading: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
  },
  methods: {
    handleClose() {},
    handleOpen() {
      this.getList();
    },
    getList() {
      if (!this.taskTemplateCode) {
        return;
      }
      this.loading = true;
      getTaskTemplateTitles(this.taskTemplateCode)
        .then((res) => {
          this.list = res?.data || [];

          this.$nextTick(() => {
            if (this.$refs.Table) {
              this.list.forEach((row) => {
                if (row.showInBoard == "Y") {
                  this.$refs.Table.toggleRowSelection(row);
                }
              });
            }
          });
        })
        .catch(() => {
          this.list = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSubmit() {
      let selection = this.$refs.Table.selection;
      if (selection.length > 5) {
        this.msgWarning("最多选择5个字段！");
        return;
      }
      this.$emit("submit", selection);
      this.dialogVisible = false;
    },
  },
};
</script>
